<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header :show-back-button="true"/>
    <main class="flex-1 p-6 overflow-y-auto">
      <h2 class="text-xl font-semibold mb-6">流程图列表</h2>

      <div class="flow-list-container">
        <table class="flow-table w-full">
          <thead>
          <tr class="text-left bg-gray-50">
            <th class="py-3 px-4">名称</th>
            <th class="py-3 px-4">描述</th>
            <th class="py-3 px-4">类别</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="flow in flowDiagrams"
              :key="flow.id"
              @click="viewFlowDiagram(flow.id)"
              class="border-b hover:bg-gray-50 cursor-pointer transition-colors">
            <td class="py-3 px-4">
              <div class="flex items-center">
                <i class="fas fa-project-diagram text-purple-500 mr-2"></i>
                {{ flow.name }}
              </div>
            </td>
            <td class="py-3 px-4 text-gray-600">{{ flow.description }}</td>
            <td class="py-3 px-4 text-gray-500">{{ flow.category }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()

const flowDiagrams = ref([
  {
    id: 'winding-machine-basic',
    name: '绕线机基本流程',
    description: '绕线机设备的基本工作流程，包含安全门检测、气压检测等基础功能',
    category: '设备流程'
  },
  {
    id: 'winding-machine-mes',
    name: '绕线机MES流程',
    description: '绕线机与MES系统交互的完整流程，包含扫码、数据上传等功能',
    category: '设备流程'
  },
  {
    id: 'winding-machine-error',
    name: '绕线机异常处理流程',
    description: '绕线机运行过程中的异常情况处理流程',
    category: '设备流程'
  },
  {
    id: 'winding-machine-maintenance',
    name: '绕线机维护流程',
    description: '绕线机日常维护和保养流程指南',
    category: '设备流程'
  },
  {
    id: 'winding-machine-parameter',
    name: '绕线机参数设置流程',
    description: '绕线机张力、圈数等工艺参数的配置流程',
    category: '设备流程'
  }
])

const viewFlowDiagram = (id) => {
  router.push(`/flow-diagrams/${id}`)
}
</script>

<style scoped>
.flow-table {
  border-collapse: collapse;
  width: 100%;
}

.flow-table th {
  font-weight: 500;
  color: var(--text-secondary);
}

.flow-table td, .flow-table th {
  border-bottom: 1px solid var(--border-color);
}

.flow-table tbody tr:hover {
  background-color: var(--bg-hover);
}
</style>